<template>
  <div id="app">
    <el-row>
      <el-col :xs="0" :sm="6"></el-col>
      <el-col :xs="24" :sm="{span: 12, offset: 6}" class="content">
        <p class="title">游园导览</p>
        <div class="boxes">
          <div class="boxes-content">
            <div class="box" v-for="(item, index) in list" :key="index" :style="{background: item.color}">
              <router-link :to = item.link class="link">{{ item.text }}</router-link>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="0" :sm="6"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      list: [{
        text: '线路规划',
        link: '/wayLine',
        color: '#e5b36c'
      }, {
        text: '游客定位',
        link: '/location',
        color: '#85ac6b'
      }, {
        text: '景点介绍',
        link: '/introduce',
        color: '#ec97a6'
      }, {
        text: '景点全景展示',
        link: '/mapPoint',
        color: '#5598e0'
      }, {
        text: '云旅游服务',
        link: '/cloudTravel',
        color: '#ae87db'
      }]
    }
  }
}
</script>

<style scoped>


  .title {
    color: #529e1f;
    text-shadow: -3px 1px #fff, 1px 3px #fff, 3px 1px #fff, 1px -3px #fff;
    font-size: 25px;
    font-weight: bold;
    margin-top: 50px;
  }
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .boxes {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }

  .boxes-content {
    margin: 0 auto;
    width: 70%;
    /* background-color: #eee; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .box {
    margin-top: 10px;
    height: 140px;
    width: 47%;
    display: flex;
  }

  .link {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    writing-mode: vertical-lr;
    align-self: center;
    margin: 0 auto;
  }

  #app {
    background-image: url('/bg.jpg');
    background-size: 100% 100%;
  }
</style>
